<template>
    <div>
        <template v-for="menu in props.menuList" >
            <el-sub-menu :index="menu.path" v-if="menu.children">
                <template #title>
                    <template v-if="menu.meta && menu.meta.icon">
                        <el-icon>
                            <component v-if="judgeIconExists(menu.meta.icon)" :is="menu.meta.icon" />
                        </el-icon>
                    </template>
                    <span v-if="!props.collapse">{{ menu.name }}</span>
                </template>
                <!-- 如果有子菜单，则递归渲染 -->
                <MenuTree :menuList="menu.children"></MenuTree>
            </el-sub-menu>
            <!-- 没有子菜单 -->
            <el-menu-item :index="menu.path" v-if="!menu.children" @click="$router.push({ path: menu.path })">
                <template v-if="menu.meta && menu.meta.icon">
                    <el-icon>
                        <component v-if="judgeIconExists(menu.meta.icon)" :is="menu.meta.icon" />
                    </el-icon>
                </template>
                <span v-if="!props.collapse">{{ menu.name }}</span>
            </el-menu-item>
        </template>
    </div>
</template>
<script setup >
import { defineProps } from 'vue'
import {IconsNameHash} from '@/main'

const props = defineProps(['menuList', 'collapse'])

const judgeIconExists = (iconName) => {
    return IconsNameHash[iconName] !== undefined
}

</script>
<style>
</style>